<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>接口请求概览</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <link rel="stylesheet" href="lib/layui-v2.5.5/css/layui.css" media="all">
    <link rel="stylesheet" href="lib/font-awesome-4.7.0/css/font-awesome.min.css" media="all">
    <link rel="stylesheet" href="css/public.css" media="all">
</head>
<style>
    .layui-top-box {padding:40px 20px 20px 20px;color:#fff}
    .top-panel {
        border: 1px solid #eceff9;
        border-radius: 5px;
        text-align: center;
    }
    .top-panel > .layui-card-body{
        height: 60px;
    }
    .top-panel-number{
        line-height:60px;
        font-size: 30px;
        border-right:1px solid #eceff9;
    }
    .top-panel-tips{
        line-height:30px;
        font-size: 12px
    }
    .panel-box {padding:5px 15px}
    .main_btn > p {height:40px;}
</style>
<body>

<div class="layuimini-container">

    <div class="layui-box panel-box">
        <table class="layui-table">
            <tbody>
            <tr>
                <?php foreach($date_list as $k=>$v):if($k==7) echo '</tr><tr>';?>
                <td><a <?=$v==$date?'class="layui-bg-red"':''?> href="<?=U('index/info?module='.$module.'&date='.$v)?>"><?=$v?></a></td>
                <?php endforeach;?>
            </tr>
            </tbody>
        </table>
    </div>

    <div class="layui-box panel-box">
        {if $fail_address}
        <blockquote class="layui-elem-quote" style="border-left-color: #FF5722;">
            <strong>无法从以下数据源获取数据:</strong><?=implode(', ', $fail_address)?>
        </blockquote>
        {/if}
        <div class="layui-row layui-col-space20">
            <div class="layui-col-md4">
                <div class="layui-card top-panel">
                    <div class="layui-card-header">总请求</div>
                    <div class="layui-card-body">
                        <div class="layui-row layui-col-space5">
                            <div class="layui-col-xs8 layui-col-md8 top-panel-number">
                                <?=$count['total_count']?>
                            </div>
                            <div class="layui-col-xs4 layui-col-md4 top-panel-tips">
                                成功 <a style="color: #1aa094"><?=$count['suc_count']?></a><br>
                                失败 <a style="color: #bd3004"><?=$count['fail_count']?></a>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="layui-col-md4">
                <div class="layui-card top-panel">
                    <div class="layui-card-header">慢请求</div>
                    <div class="layui-card-body">
                        <div class="layui-row layui-col-space5">
                            <div class="layui-col-xs7 layui-col-md7 top-panel-number">
                                <?=$count['slow_times']?>
                            </div>
                            <div class="layui-col-xs5 layui-col-md5 top-panel-tips">
                                最大耗时 <a style="color: #bd3004"><?=$count['max_cost_time']?></a><br>
                                最小耗时 <a style="color: #bd3004"><?=$count['min_cost_time']?></a>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="layui-col-md4">
                <div class="layui-card top-panel">
                    <div class="layui-card-header">可用性</div>
                    <div class="layui-card-body">
                        <div class="layui-row layui-col-space5">
                            <div class="layui-col-xs8 layui-col-md8 top-panel-number">
                                <?=$count['suc_rate']?>%
                            </div>
                            <div class="layui-col-xs4 layui-col-md4 top-panel-tips">
                                成功 <a style="color: #1aa094"><?=$count['suc_rate']?>%</a><br>
                                不可用 <a style="color: #bd3004"><?=round(100-$count['suc_rate'],4)?>%</a>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div class="layui-box panel-box">
        <div class="layui-card">
            <div class="layui-card-header layui-bg-gray"><i class="fa fa-line-chart icon"></i>请求量曲线</div>
            <div class="layui-card-body">
                <div id="req-records" style="width: 100%;min-height:300px"></div>
            </div>
        </div>
        <div class="layui-card">
            <div class="layui-card-header layui-bg-gray"><i class="fa fa-line-chart icon"></i>请求耗时曲线</div>
            <div class="layui-card-body">
                <div id="cost-records" style="width: 100%;min-height:200px"></div>
            </div>
        </div>

        <table class="layui-table">
            <thead>
            <tr>
                <th>时间</th>
                <th>调用总数</th>
                <th>慢请求数</th>
                <th>最大耗时</th>
                <th>最小耗时</th>
                <th>平均耗时</th>
                <th>成功调用总数</th>
                <th>成功平均耗时</th>
                <th>失败调用总数</th>
                <th>失败平均耗时</th>
                <th>成功率</th>
            </tr>
            </thead>
            <tbody>
            {if $data}
            {list $data $v}
            <tr>
                <td>{$v['time']}</td>
                <td>{$v['total_count']}</td>
                <td>{$v['slow_times']}</td>
                <td>{$v['max_cost_time']}</td>
                <td>{$v['min_cost_time']}</td>
                <td>{$v['total_avg_time']}</td>
                <td>{$v['suc_count']}</td>
                <td>{$v['suc_avg_time']}</td>
                <td>{$v['fail_count']}</td>
                <td>{$v['fail_avg_time']}</td>
                <td>{$v['precent']}</td>
            </tr>
            {/list}
            {else}
            <tr>
                <td colspan="100%">暂无数据</td>
            </tr>
            {/if}
            </tbody>
        </table>
    </div>
</div>
<script src="lib/layui-v2.5.5/layui.js" charset="utf-8"></script>
<script src="https://cdn.jsdelivr.net/npm/echarts@5.0.0/dist/echarts.min.js"></script>
<script>
    /**
     * 报表功能
     */
    var echartsReq = echarts.init(document.getElementById('req-records'));
    echartsReq.setOption({
        tooltip: {
            trigger: 'axis'
        },
        legend: {
            data:['成功曲线','失败曲线','慢请求']
        },
        grid: {
            left: '3%',
            right: '2%',
            bottom: '3%', top:'40px',
            containLabel: true
        },
        toolbox: {
            feature: {
                saveAsImage: {}
            }
        },
        xAxis: {
            type: 'category',
            boundaryGap: false,
            data: {$xAxis} //['周一','周二','周三','周四','周五','周六','周日']
        },
        yAxis: {
            name: '请求量(次/5分钟)',
            type: 'value'
        },
        series: [
            {
                name:'成功曲线',
                type:'line',
                data:{$ok_data} //[120, 132, 101, 134, 90, 230, 210]
            },
            {
                name:'失败曲线',
                type:'line',
                data:{$fail_data} //[220, 182, 191, 234, 290, 330, 310]
            },
            {
                name:'慢请求',
                type:'line',
                data:{$slow_data} //[220, 182, 191, 234, 290, 330, 310]
            }
        ]
    });

    var echartsCost = echarts.init(document.getElementById('cost-records'));

    echartsCost.setOption({
        tooltip: {
            trigger: 'axis'
        },
        legend: {
            data:['成功平均耗时','失败平均耗时','最大耗时','最小耗时'],
        },
        grid: {
            left: '3%',
            right: '2%',
            bottom: '3%', top:'40px',
            containLabel: true
        },
        toolbox: {
            feature: {
                saveAsImage: {}
            }
        },
        xAxis: {
            type: 'category',
            boundaryGap: false,
            data: {$xAxis} //['周一','周二','周三','周四','周五','周六','周日']
        },
        yAxis: {
            name: '平均耗时(单位：秒)',
            type: 'value'
        },
        series: [
            {
                name:'成功平均耗时',
                type:'line',
                data:{$ok_cost_data} //[120, 132, 101, 134, 90, 230, 210]
            },
            {
                name:'失败平均耗时',
                type:'line',
                data:{$fail_cost_data} //[220, 182, 191, 234, 290, 330, 310]
            },
            {
                name:'最大耗时',
                type:'line',
                data:{$max_cost_data} //[120, 132, 101, 134, 90, 230, 210]
            },
            {
                name:'最小耗时',
                type:'line',
                data:{$min_cost_data} //[220, 182, 191, 234, 290, 330, 310]
            }
        ]
    });

    // echarts 窗口缩放自适应
    window.onresize = function(){
        echartsReq.resize();
        echartsCost.resize();
    }
</script>
</body>
</html>